<template>
	<view class="app-nearby-pay-detail" :style="[AppSkinVar]">


		<background-image src="/pages/nearby/static/pay_detail_icon1.png" :size="['272rpx','228rpx']">
			<view class="overflow-hidd fixed-top" style="z-index: 2;">
				<background-image src="/pages/nearby/static/pay_detail_icon1.png" :size="['272rpx','228rpx']">
					<e-navbar placeholder bgColor="transparent">
						<template #left>
							<view>
								
							</view>
						</template>
					</e-navbar>
					<view class="e-p-l-30 e-p-r-30 e-m-b-34 e-p-t-40">
						<view class="e-m-b-20 e-flex c-white">
							<picker-select v-model="requestTime" autoWidth suffixIcon="arrow-down"
								suffixIconStyle="color:#fff;font-size:22rpx;" pickerType="datetime-picker"
								datetimePickerMode="year-month" formatter="yyyy-mm"
								:valueFormatter="`yyyy${$t('common.year')}mm${$t('common.month')}`"
								@change="handleRefresh()"></picker-select>
						</view>
						<view class="e-flex e-flex-between">
							<text
								class="c-white e-font-24">{{$t('nearby.payDetailTxt1').replace('-NUMBER-',count||'0')}}</text>
							<view>
								<text class="fw-500 c-white">{{$unitEn}}</text>
								<text class="e-font-36 c-white fw-500">{{moneyPay||0}}</text>
							</view>
						</view>
					</view>
				</background-image>
			</view>
			<view class="e-p-t-40 e-p-r-20 e-p-l-20 ">
				
				<e-navbar autoBack leftIconColor="#fff" :title="pageTitle||$t('nearby.payDetail')"
					titleStyle="color:#fff" placeholder bgColor="transparent"></e-navbar>
				<view class="e-p-l-10 e-p-r-10 e-m-b-34">
					<view class="e-m-b-20 e-flex c-white">
						<picker-select v-model="requestTime" autoWidth suffixIcon="arrow-down"
							suffixIconStyle="color:#fff;font-size:22rpx;" pickerType="datetime-picker"
							datetimePickerMode="year-month" formatter="yyyy-mm"
							:valueFormatter="`yyyy${$t('common.year')}mm${$t('common.month')}`"
							@change="handleRefresh()"></picker-select>
					</view>
					<view class="e-flex e-flex-between">
						<text
							class="c-white e-font-24">{{$t('nearby.payDetailTxt1').replace('-NUMBER-',count||'0')}}</text>
						<view>
							<text class="fw-500 c-white">{{$unitEn}}</text>
							<text class="e-font-36 c-white fw-500">{{moneyPay||0}}</text>
						</view>
					</view>
				</view>
				<view class="app-nearby-pay-detail__body bg-white e-p-l-20 e-p-r-20 e-radius-20">
					<view v-for="item in list" :key="item.id">
						<view class="e-p-t-30 e-p-b-30 e-flex e-flex-items-start">
							<load-image :src="item.storeLogo" size="104rpx"></load-image>
							<view class="e-m-l-20 e-flex-1 e-p-t-20">
								<view class="e-flex e-flex-between e-m-b-6">
									<text>{{item.ruleData}}</text>
									<text class="e-font-30 fw-500">-{{item.moneyPay}}</text>
								</view>
								<view class="e-flex e-flex-between ">
									<text
										class="e-font-24 c-secondary">{{timeFormat(item.payTime,'mm-dd hh:MM:ss')}}</text>
									<text class="e-font-24 c-secondary">{{item.payName}}</text>
								</view>
							</view>
						</view>
						<e-line></e-line>
					</view>
					<empty v-if="isEmpty"></empty>
					<load-more :showLoad="showLoad" v-else></load-more>
				</view>
			</view>
		</background-image>

	</view>
</template>

<script setup lang="ts">
	import { ref, computed } from 'vue'
	import { timeFormat, getMonthEndTime } from '@/common/utils'
	import { useQueryPage } from '@/common/hooks';
	import { getNearbyStorePayDetail } from '@/common/request/api';
	import { onLoad, onReachBottom } from '@dcloudio/uni-app';

	const props = defineProps<{
		pageTitle ?: string
	}>()

	const requestTime = ref(timeFormat(null, 'yyyy-mm'))
	const requestParams = computed(() => {
		return {
			startTime: timeFormat(requestTime.value, 'yyyy-mm-dd'),
			endTime: timeFormat(getMonthEndTime(timeFormat(requestTime.value, 'yyyy-mm-dd')), 'yyyy-mm-dd'),
		}
	})
	const count = ref('0')
	const moneyPay = ref(0)
	const { showLoad, list, handleQueryPage, handleRefresh } = useQueryPage({
		api: getNearbyStorePayDetail,
		option: {
			responseKey: 'data.rows',
			totalKey: 'data.total',
			params: requestParams,
			responseInterception(res) {
				count.value = `${res.count}`
				moneyPay.value = res.moneyPay
			}
		}
	});
	onReachBottom(() => {
		handleQueryPage()
	})
	onLoad(() => {
		handleRefresh()
	})
</script>

<style lang="scss" scoped>
	@include appBem_b(nearby-pay-detail) {
		:deep(.app-components-background-image__background) {
			background: var(--gradient-primary);
			padding-left: 418rpx;
			padding-top: 112rpx;
			height: 600rpx;
		}

		@include appBem_e(body) {
			min-height: 600rpx;
		}
	}
</style>